<template>
  <div class="whole-bg">
    <div class="registerBlock">
      <div class="registerText">用户注册</div>
      <div class="formBlock">
        <el-form :rules="rules" :model="ruleForm" ref="ruleForm">
          <div class="input">
            <span class="formText">用户名:</span>
            <el-form-item prop="username">
              <el-input size="normal" style="width: 350px;" v-model="ruleForm.username"></el-input>
            </el-form-item>
          </div>
          <div class="input">
            <span class="formText">密&nbsp;&nbsp;&nbsp;&nbsp;码:</span>
            <el-form-item prop="password">
              <el-input size="normal" style="width: 350px;" v-model="ruleForm.password" type="password"
                        show-password></el-input>
            </el-form-item>
          </div>
          <div class="input">
            <span class="formText">确认密码:</span>
            <el-form-item prop="checkPassword">
              <el-input size="normal" style="width: 350px;" v-model="ruleForm.checkPassword" type="password"
                        show-password></el-input>
            </el-form-item>
          </div>
          <div class="input">
            <span class="formText">名&nbsp;&nbsp;&nbsp;&nbsp;称:</span>
            <el-form-item prop="nickName">
              <el-input size="normal" style="width: 350px;" v-model="ruleForm.nickName"></el-input>
            </el-form-item>
          </div>
          <div class="input">
            <el-button type="primary" style="width: 350px;" @click="submitForm('ruleForm')" size="normal">注册</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Register",

  data() {
    let checkNickName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(' 网站名称不能为空'));
      } else {
        callback();
      }
    };
    let checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error(' 用户名不能为空'));
      } else {
        callback();
      }
    };
    let validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPassword !== '') {
          this.$refs.ruleForm.validateField('checkPassword');
        }
        callback();
      }
    };
    let validateCheckPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        password: '',
        checkPassword: '',
        username: '',
        nickName: '',
      },
      rules: {
        username: [
          /*{required: true, message: '请输入用户名', trigger: 'blur'},*/
          {validator: checkUsername, trigger: 'blur'}
        ],
        password: [
          /*{required: true, message: '请输入密码', trigger: 'blur'},*/
          {validator: validatePassword, trigger: 'blur'}
        ],
        checkPassword: [
          /*{required: true, message: '请再次输入密码', trigger: 'blur'},*/
          {validator: validateCheckPassword, trigger: 'blur'}
        ],
        nickName: [
          {validator: checkNickName, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    /*注册请求*/
    register() {
      request.post('/api/user/register', {
        username: this.ruleForm.username,
        nick_name: this.ruleForm.nickName,
        password: this.ruleForm.password
      }).then((res) => {
        this.$router.push('/login');
        console.log(res);
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log('submit!!');
          this.register();  /*调用注册请求函数*/
          return true;
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
  }
}
</script>

<style scoped>
.whole-bg {
  height: 100%;
  width: 100%;
  overflow: hidden; /*溢出隐藏，清除浮动*/
  background-image: url('../assets/images/infinity-3003676.jpg'); /*设置div容器为当前背景图片*/
  background-size: 100% 100%; /*设置背景图片占满整个屏幕*/
}

.registerBlock {
  width: 450px;
  margin: 100px auto;
}

.registerText {
  color: azure;
  font-size: 50px;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "宋体", Arial, sans-serif;
  text-align: center;
  padding: 20px 0;
  margin-left: 20px;
  margin-bottom: 20px;
}

.input {
  display: flex; /*盒装布局*/
  /*  justify-content: space-between; !*盒装两端对齐*!*/
  justify-content: right; /*盒装布局，右对齐*/
  align-items: center; /*盒装垂直居中*/
  margin-bottom: 30px;
}

.formText {
  color: azure;
  font-size: 20px;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  margin-right: 10px;
}


.el-form-item {
  margin-bottom: 0px;
}

/*重写表单验证样式*/
>>> .el-form-item__error {
  float: right;
  font-size: 20px;
  left: auto;
}

</style>


